<template>
  <div class="map-main">
    <MapPage
      class="map"
      :activeTab="activeTab"
      :api="api"
      :paramsObj="paramsObj"
    ></MapPage>
    <template v-if="!onlyMap">
      <div class="rate-box">
        <img src="@/assets/imgs/icon-rate.webp" class="icon-img" alt="" />
        <div class="content">
          <p class="label">老龄化率</p>
          <p class="value">24.42%</p>
        </div>
      </div>
      <!-- <ul class="left-tab-ul">
        <li class="item" v-for="(item, index) in leftTabList" :key="index">
          <p class="label">{{ item.label }}</p>
          <p class="value">
            {{ item.value }}
            <span class="unit">万人</span>
          </p>
        </li>
      </ul> -->

      <ul
        class="right-tab-ul"
        :style="{ width: activeTab == 1 ? '114px' : '213px' }"
      >
        <li class="item" v-for="(item, index) in tabList" :key="index">
          <p class="label">{{ item.label }}</p>
          <p class="value">{{ item.value }}</p>
        </li>
      </ul>
    </template>
  </div>
</template>

<script setup lang="ts">
import MapPage from "./map.vue";

type Props = {
  activeTab?: any;
  api?: string;
  paramsObj?: any;
  onlyMap?: boolean;
};
const props = withDefaults(defineProps<Props>(), {
  onlyMap: false,
});

const tabList = ref([]);
const leftTabList = [
  { label: "户籍人口", value: "742.07" },
  { label: "常住人口", value: "949.11" },
  { label: "户籍老年人", value: "181.21" },
];

const tab1List = [
  { label: "公办公营", value: "23" },
  { label: "公办民营", value: "43" },
  { label: "民营", value: "211" },
  { label: "合计", value: "277" },
];

const tab2List = [
  { label: "城市街道综合性养老服务中心", value: "97" },
  { label: "社区居家养老服务中心", value: "1467" },
  { label: "社区银发助餐点", value: "1369" },
  { label: "示范性互助养老睦邻点", value: "101" },
];

onMounted(() => {
  tabList.value = props.activeTab == 1 ? tab1List : tab2List;
});
</script>

<style scoped lang="scss">
.map-main {
  position: relative;
  height: 100%;
  width: 100%;
  .map {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    z-index: 100;
    left: 20px;
  }
  .rate-box {
    position: relative;
    z-index: 1;
    .content {
      position: absolute;
      left: 86px;
      top: 45px;
      .label {
        font-family: "Microsoft YaHei";
        font-weight: 400;
        font-size: 18px;
        letter-spacing: 0.05px;
        text-align: center;
        color: #fff;
      }
      .value {
        font-family: "Franklin Gothic Medium";
        font-weight: 500;
        font-size: 33px;
        letter-spacing: 0.05px;
        text-align: left;
        color: #fff;
        text-shadow: 0 3px 6px rgba(22, 200, 255, 0.33);
      }
    }
    .icon-img {
      width: 135.3px;
      height: 135.3px;
      background: transparent;
    }
  }
  .left-tab-ul {
    @extend .right-tab-ul;
    left: 0;
    top: 200px !important;
    .item {
      background: transparent !important;
      text-align: left !important;
      padding-left: 12px !important;
    }
    .unit {
      font-family: "Microsoft YaHei";
      font-weight: 400;
      font-size: 14px;
      letter-spacing: 0.05px;
      text-align: left;
      color: rgba(255, 255, 255, 0.4);
    }
  }
  .right-tab-ul {
    display: flex;
    flex-flow: column;
    gap: 10px;
    right: 4px;
    top: 20px;
    position: absolute;
    .item {
      padding-right: 10px;
      display: flex;
      flex-flow: column;
      justify-content: center;
      text-align: right;
      gap: 15px;
      min-height: 75px;
      border-radius: 4px;
      background: rgb(29 46 61 / 49%);
      .label {
        font-family: "Microsoft YaHei";
        font-weight: 400;
        font-size: 14px;
        letter-spacing: 0.05px;
        color: #fff;
      }
      .value {
        font-family: "MS PGothic";
        font-weight: 400;
        font-size: 28px;
        color: #16c8ff;
        text-shadow: 0 3px 6px rgba(22, 200, 255, 0.33);
      }
    }
  }
}
</style>
